<template>
  <div style="width: 100%; height: 95vh; overflow: hidden" ref="wrapper">
    <div>
      <!-- 顶部图片 -->
      <div class="shopImg" style="position: relative">
        <img
          :src="`http://47.122.115.10:5000/${selectedFood.imgUrl.slice(27)}`"
          alt=""
          style="width: 100%; background-size: contain"
        />
        <span
          @click="$router.back()"
          style="position: absolute; top: 10px; right: 10px; font-size: 40px"
          >×</span
        >
      </div>
      <!-- 商品详情页 -->
      <div
        class="title"
        style="padding: 20px; display: flex; flex-direction: column"
      >
        <h4 style="font-size: 0.45rem; margin: 0">{{ selectedFood.name }}</h4>
        <span style="font-size: 0.32rem; color: rgb(199, 199, 199)"
          >月售{{ selectedFood.sellCount }} 好评率{{
            selectedFood.rating
          }}%</span
        >
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <span style="color: red; font-size: 0.4rem"
            >￥{{ selectedFood.price }}</span
          >
          <van-button
            v-if="selectedFood.count === 0"
            @click="
              add({
                categoryId: $route.query.categoryId,
                foodId: $route.query.foodId,
              })
            "
            type="info"
            style="border-radius: 20px; height: 0.8rem"
            >加入购物车</van-button
          >
          <div
            v-else
            style="display: flex; justify-content: end; align-items: center"
          >
            <van-button
              @click="
                decrement({
                  categoryId: $route.query.categoryId,
                  foodId: $route.query.foodId,
                })
              "
              size="mini"
              style="width: 0.4rem; height: 0.4rem; border-radius: 50%"
              background-color="yellow"
              ><span class="iconfont icon-jianshao"></span
            ></van-button>
            <div
              style="
                margin: 0 5px;
                display: inline-flex;
                justify-content: center;
                align-items: end;
                width: 0.3rem;
                height: 100%;
                font-size: 0.3rem;
                margin: 0 0.2rem;
              "
            >
              <span>{{ selectedFood.count }}</span>
            </div>
            <van-button
              @click="
                add({
                  categoryId: $route.query.categoryId,
                  foodId: $route.query.foodId,
                })
              "
              size="mini"
              style="width: 0.4rem; height: 0.4rem; border-radius: 50%"
              ><span
                style="display: block; width: 100%"
                class="iconfont icon-zengjia"
              ></span
            ></van-button>
          </div>
        </div>
      </div>
      <!-- 空白 -->
      <div
        style="
          height: 30px;
          background-color: rgb(244, 245, 249);
          border: 2px solid rgb(228, 228, 228);
        "
      ></div>
      <div
        style="
          padding: 20px;
          margin-bottom: 10px;
          border-bottom: 2px solid rgb(235, 235, 235);
        "
      >
        <h5 style="margin: 0; font-weight: 200">商品介绍</h5>
        <p style="font-size: 0.33rem; color: rgb(180, 180, 180)">
          {{ selectedFood.goodsDesc }}
        </p>
      </div>
      <!-- 评论区 -->
      <div class="content">
        <van-tabs type="card" color="skyblue" style="margin: 0">
          <van-tab
            style="margin: 0; margin-top: 10px"
            :title="`全部${selectedFood.ratings.length}`"
          >
            <div
              class="ratingsBox"
              v-for="(item, index) in selectedFood.ratings"
              :key="index"
            >
              <img :src="item.avatar" alt="" />
              <div class="ratingsBox_right">
                <div
                  class="tit"
                  style="display: flex; justify-content: space-between"
                >
                  <p style="font-size: 0.45rem">{{ item.username }}</p>
                  <p style="font-size: 0.4rem">
                    {{ item.formattedDate }}
                    <!-- {{ new Date(item.rateTime) }} -->
                    <!-- {{ moment(item.rateTime).format("YYYY-MM-DD HH:mm:ss") }} -->
                  </p>
                </div>
                <p style="font-size: 0.3rem; padding-bottom: 0.3rem">
                  {{ item.text }}
                </p>
              </div>
            </div>
          </van-tab>
          <van-tab
            :title="`推荐${
              selectedFood.ratings.filter((ele) => ele.rateType === 0).length
            }`"
          >
            <div
              class="ratingsBox"
              v-for="(item, index) in selectedFood.ratings.filter(
                (ele) => ele.rateType === 0
              )"
              :key="index"
            >
              <img :src="item.avatar" alt="" />
              <div class="ratingsBox_right">
                <div
                  class="tit"
                  style="display: flex; justify-content: space-between"
                >
                  <p style="font-size: 0.45rem">{{ item.username }}</p>
                  <p style="font-size: 0.4rem">
                    {{ item.formattedDate }}
                  </p>
                </div>
                <p style="font-size: 0.3rem; padding-bottom: 0.3rem">
                  {{ item.text }}
                </p>
              </div>
            </div>
          </van-tab>
          <van-tab
            :title="`吐槽${
              selectedFood.ratings.filter((ele) => ele.rateType === 1).length
            }`"
          >
            <div
              class="ratingsBox"
              v-for="(item, index) in selectedFood.ratings.filter(
                (ele) => ele.rateType == 1
              )"
              :key="index"
            >
              <img :src="item.avatar" alt="" />
              <div class="ratingsBox_right">
                <div
                  class="tit"
                  style="display: flex; justify-content: space-between"
                >
                  <p style="font-size: 0.45rem">{{ item.username }}</p>
                  <p style="font-size: 0.4rem">
                    {{ item.formattedDate }}
                  </p>
                </div>
                <p style="font-size: 0.3rem; padding-bottom: 0.3rem">
                  {{ item.text }}
                </p>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 底部 -->
    <div
      class="shop"
      style="position: relative; z-index: 4003"
      @click="handleShopList"
    >
      <van-submit-bar
        style="background-color: black; padding: 0"
        :price="totalPrice * 100"
      >
        <template #default>
          <van-badge
            style="margin-top: 5px"
            :content="totalSelectedCount > 0 ? totalSelectedCount : ''"
            class="badge-style"
          >
            <span
              style="border-radius: 50%"
              class="iconfont icon icon-gouwuche"
              id="icon-shop"
            >
            </span>
          </van-badge>
        </template>
        <template #button>
          <van-button
            style="width: 2rem; height: 100%"
            type="danger"
            @click.stop="onSubmit"
          >
            去结算
          </van-button>
        </template>
      </van-submit-bar>
    </div>

    <!-- 弹出购物车 -->
    <van-popup
      v-model="shopCarShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <template>
        <header
          style="
            padding: 0 10px;
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgb(237, 238, 242);
            color: rgb(195, 196, 198);
            font-size: 16px;
          "
        >
          <span>已选商品</span>
          <span @click="clearShop">清空</span>
        </header>
        <main style="padding: 0 10px">
          <ul>
            <li v-for="item in selectedItems" :key="item.id" class="shop_li">
              <span>{{ item.name }}</span>
              <div class="shop_right">
                <span class="span_price">￥{{ item.price }}</span>
                <div
                  style="
                    display: flex;
                    justify-content: end;
                    align-items: center;
                  "
                >
                  <van-button
                    @click="
                      decrement({
                        categoryId: item.categoryId,
                        foodId: item.id,
                      })
                    "
                    size="mini"
                    style="width: 0.4rem; height: 0.4rem; border-radius: 50%"
                    background-color="yellow"
                    ><span class="iconfont icon-jianshao"></span
                  ></van-button>
                  <div
                    style="
                      margin: 0 5px;
                      display: inline-flex;
                      justify-content: center;
                      align-items: end;
                      width: 0.3rem;
                      height: 100%;
                      font-size: 0.3rem;
                      margin: 0 0.2rem;
                    "
                  >
                    <span>{{ item.count }}</span>
                  </div>
                  <van-button
                    @click="
                      add({ categoryId: item.categoryId, foodId: item.id })
                    "
                    size="mini"
                    style="width: 0.4rem; height: 0.4rem; border-radius: 50%"
                    ><span
                      style="display: block; width: 100%"
                      class="iconfont icon-zengjia"
                    ></span
                  ></van-button>
                </div>
              </div>
            </li>
          </ul>
        </main>
      </template>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { Dialog } from "vant";
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
import BScroll from "better-scroll";

export default {
  props: {
    //将路由中的参数aaa和bbb解耦到组件上的props上
    categoryId: {
      type: String,
    },
    foodId: {
      type: String,
    },
  },
  data: () => {
    return {
      shopCarShow: false,
    };
  },
  methods: {
    ...mapMutations(["add", "decrement", "setShopListObj"]),
    ...mapActions(["clearCart"]),

    //点击下方购物车
    handleShopList() {
      if (this.$store.getters.selectedItems[0]) {
        this.shopCarShow = !this.shopCarShow;
      }
    },
    onSubmit() {
      Dialog.confirm({
        title: "支付",
        message: `您需要支付${this.$store.getters.totalPrice}元`,
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    clearShop() {
      Dialog.confirm({
        title: "清空操作",
        message: `此操作不可撤销，请谨慎操作！`,
      })
        .then(() => {
          this.shopCarShow = false;
          this.clearCart();
          // location.reload()
        })
        .catch(() => {
          // on cancel
        });
    },
    initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          click: true, // 允许点击事件
          scrollY: true, // 允许纵向滚动
          // 其他配置项...
        });
      } else {
        this.scroll.refresh(); // 如果已经初始化过，刷新滚动区域
      }
    },
  },
  computed: {
    ...mapState(["selectedFood"]),
    ...mapGetters(["selectedItems", "totalSelectedCount", "totalPrice"]),
  },
  created() {
    const { categoryId, foodId } = this.$route.query;
    this.$store.dispatch("setSelectedFood", { categoryId, foodId });
    console.log(this.selectedFood);
  },
  mounted() {
    this.$nextTick(() => {
      this.initScroll();
    });
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.custom-title
  font-size 0.4rem
  font-weight 600
.custom-price
  font-size 0.4rem
  color red
.van-submit-bar__price
  color: #b2a7a8;
  font-weight: 700;
  font-size: .3rem;
#icon-shop
  box-sizing content-box
  margin-bottom 1rem
  display block
  width 1rem
  height 1rem
  background-color rgb(43, 52, 59)
  text-align center
  line-height 1rem
  border-radius 50%
  font-size 0.5rem
  color rgb(139, 140, 140)
  border 5px solid black
.iconfont
  font-size .6rem
.shop_li
  display flex
  justify-content space-between
  align-items center
  width 100%
  height 50px
  border-bottom 1px solid rgb(228, 228, 228)
  span
    font-size 0.35rem
  .iconfont
    font-size .6rem
  .shop_right
    display flex
    .span_price
      margin-right 15px
      color red
.content
  box-sizing border-box
  width: 100%;
  height: auto;
  flex: 1;
  padding: 0 0.4667rem;
  .ratingsBox
    border-top: 1px solid;
    display: flex;
    justify-content: space-between;
    img
      width: 15%;
      height: 15%;
      margin: 10px;
      border-radius: 50%;
     .ratingsBox_right
      flex: 1;
.van-submit-bar__bar
  padding-right 0
</style>
